import React, { useRef } from 'react';
import { useIntl, connect, FormattedMessage } from 'umi';
import { PageContainer } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import { removeMessage, getMessageList } from '@/services';
import { Popconfirm, Button, message } from 'antd';

const Message = () => {
  const intl = useIntl();
  const actionRef = useRef(null);

  const queryList = async (params) => {
    const res = await getMessageList();
    if (res) {
      return res;
    }
  };

  const handleRemove = async (record) => {
    const res = await removeMessage({ id: record.id });
    if (res) {
      message.success(
        intl.formatMessage({
          id: 'pages.success',
        }),
      );
      actionRef?.current?.reload();
    }
  };

  const columns = [
    {
      title: <FormattedMessage id="pages.dataQuery.checkPoint" defaultMessage="检测点" />,
      dataIndex: 'infraredDeviceLocation',
      width: 100,
      fixed: 'left',
    },
    {
      title: <FormattedMessage id="pages.history.infraredDeviceName" defaultMessage="生产线" />,
      dataIndex: 'infraredDeviceName',
      width: 100,
      fixed: 'left',
    },
    {
      title: <FormattedMessage id="pages.dataQuery.materialName" defaultMessage="物料名称" />,
      dataIndex: 'materialName',
      ellipsis: true,
      width: 300,
    },
    {
      title: <FormattedMessage id="pages.dataQuery.materialCode" defaultMessage="物料编码" />,
      dataIndex: 'materialCode',
    },
    {
      title: <FormattedMessage id="pages.dataQuery.project" defaultMessage="检测项目" />,
      dataIndex: 'inspectionName',
    },
    {
      title: (
        <FormattedMessage id="pages.dataMain.checkProjectCode" defaultMessage="检测项目编码" />
      ),
      dataIndex: 'inspectionCode',
    },
    {
      title: <FormattedMessage id="pages.dataQuery.min" defaultMessage="最小值" />,
      dataIndex: 'minValue',
    },
    {
      title: <FormattedMessage id="pages.dataQuery.max" defaultMessage="最大值" />,
      dataIndex: 'maxValue',
    },
    {
      title: <FormattedMessage id="pages.history.alarmValue" defaultMessage="报警值" />,
      dataIndex: 'alarmValue',
      fixed: 'right',
      width: 100,
    },
    {
      title: <FormattedMessage id="pages.history.alarmTime" defaultMessage="报警时间" />,
      dataIndex: 'updateTime',
      fixed: 'right',
      width: 200,
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      fixed: 'right',
      width: 100,
      render: (_, record) => [
        <Popconfirm
          key="delete"
          title={<FormattedMessage id="pages.delete_confirm" />}
          onConfirm={() => handleRemove(record)}
        >
          <Button size="small" type="danger">
            <FormattedMessage id="pages.delete" defaultMessage="删除" />
          </Button>
        </Popconfirm>,
      ],
    },
  ];

  return (
    <PageContainer>
      <ProTable
        actionRef={actionRef}
        scroll={{ x: 1400 }}
        rowKey="id"
        search={false}
        request={(params, sorter, filter) => queryList({ ...params })}
        columns={columns}
        pagination={false}
      />
    </PageContainer>
  );
};

export default Message;
